<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Ajax练习</title>
    <link href="css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="js/jquery-2.2.0.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            color: #02177c;
            background: #b3d6ff;
        }
        a, #animation {
            cursor: pointer;
            margin-right: 5px;
        }
        h3{
            text-align: center;
        }
        form{
            border: #f300ff inset 3px;
            padding: 10px;
            background: #d3e5ff;
        }
        form textarea{
            max-width: 100%;
        }
        #loading{
            position: fixed;
            left: 50%;
            top: 50%;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <h1>jQuery与ajax的应用</h1>
    <hr>
    <br>
    <h3>ajax表单serialize()方法</h3>
    <div class="row" >
        <div class="col-md-4 col-md-offset-4">
            <form action="" id="form">
                <fieldset>
                    <legend>个人信息输入</legend>
                    <div class="form-group">
                        <label for="name">姓名：</label>
                        <input class="form-control" id="name" name="username" value="莫扎特">
                    </div>
                    <div class="form-group">
                        <label for="pw">密码：</label>
                        <input class="form-control" id="pw" type="password" name="password" value="mozhate">
                    </div>
                    <div class="form-group">
                        <label for="info">详细信息：</label>
                        <textarea class="form-control" id="info" type="password" name="info">德国神童，天才音乐家</textarea>
                    </div>
                   <div class="form-group">
                        <input id="btn_sub" class="btn btn-success" type="submit" value="提交">
                   </div>
                </fieldset>
            </form>
            <h3>提交结果：</h3>
            <div id="resText4"></div>
        </div>
    </div>
    <hr>
    <h3>ajax表单serializeArray()方法</h3>
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <form action="" id="form2">
                <h4><b>你会玩的乐器有：</b></h4>
                <div class="form-group">
                    <label><input type="checkbox" name="instrument"  value="钢琴">钢琴</label>
                    <label><input type="checkbox" name="instrument" checked value="架子鼓">架子鼓</label>
                    <label><input type="checkbox" name="instrument" value="吉他">吉他</label>
                    <label><input type="checkbox" name="instrument" value="古筝">古筝</label>
                </div>
                <div class="form-group">
                    <label><input type="radio" name="grade" value="初一年级">初一年级</label>
                    <label><input type="radio" name="grade" value="初二年级">初二年级</label>
                    <label><input type="radio" name="grade" value="grade3">grade3</label>
                </div>
                <div class="form-group">
                    <input id="btn_sub2" class="btn btn-success" type="submit" value="serializeArray提交">
                    <input id="btn_sub3" class="btn btn-success" type="submit" value="Param提交">
                </div>
            </form>

            <h3>提交结果：</h3>
            <div id="resText5"></div>
            <div id="resText6"></div>
        </div>
    </div>
	<div id="loading" class= "table-bordered btn-warning img-thumbnail" style="display: none" >加载中。。。</div>
    <div style="height: 500px"></div>
</div>
<script>
    $(function(){
        $(document).ajaxStart(function(){
            $("#loading").show();
        });
        $(document).ajaxStop(function(){
            $("#loading").hide();
        });
        $("#btn_sub").click(function(){
            $.post("ajax/formSerialize",
                $("#form").serialize(),
                function(data,textStatus){
//                    alert(data);
                    $("#resText4").html(data)
            });
            return false;
        });

        $("#btn_sub2").click(function(){
            var fields = $("#form2").serializeArray();
            //由于serializeArray()返回的是json的对象数组，每个对象是name：value的组合
            // 所以表单中如果没有那么属性，则不能被序列化
            //如果表单中没有value，则返回“on”
            console.log(fields);
            var html = "";
            $.each(fields,function(i,field){
                alert(i+" - "+field.name +": "+field.value);
                html +="<br>"+ i+" - "+field.name +": "+field.value;
            });
            $("#resText5").html(html);
            return false;
        });
        $("#btn_sub3").click(function(){
            var fields = $.param($("#form2").serializeArray());
            $("#resText6").html(fields);
            return false;
        });


    })






</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>